.canvas {
	margin-top: 35px;
        margin-left: 150px;
	width: 760px;
	height: auto;
	background-color: white;
}

.blueLayer {

	width: 790px;
	height: 470px;
	margin-top: 40px;
	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;
	border-top-right-radius: 20px;	
	border-bottom-right-radius: 40px;
	background-color: #3B5998;
	float: right;

}

.grayLayer {

	width: 780px;
	height: 435px;
	border-top-left-radius: 45px;
	border-bottom-left-radius: 40px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 40px;
	background-color: #eceff6;
	margin-top: 30px;
	margin-left: 5px;
}
.divlogo {

	background-image: url("../img/querocarona_logo175.png");
	width: 176px;
	height: 175px;
	position: absolute;
	z-index: 4;
	margin-left: -27px;
	margin-top: -25px;
}

.quero_carona {

	position: absolute;	
	margin-left: 100px;
	margin-top: -20px;
	color: #3B5998;
	font-size: 65px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;  
 	}

.quero_carona:after {

	content: "Quero Carona";

}


.pergunta {

	position: absolute;	
	margin-left: 210px;
	margin-top: 85px;
	color:  #3B5998;
	font-size: 32px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
 	}

.pergunta:after {

	content: "O que voce deseja fazer?";

}

.titofer {
    color: #3B5998;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 32px;
    margin-left: 275px;
    margin-top: 80px;
    position: absolute;
}

.titofer:after {

	content: "Oferecer carona";

}


.titsoli {
    color: #3B5998;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 32px;
    margin-left: 275px;
    margin-top: 80px;
    position: absolute;
}

.titsoli:after {

	content: "Solicitar carona";

}
.label_ofer {

	position: absolute;	
	margin-left: 20px;
	margin-top: 260px;
	color: #3B5998;
	font-size: 25px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
 	}

.label_ofer:after {

	content: "Caronas ofertadas";

}

.label_soli {

	position: absolute;	
	margin-left: 390px;
	margin-top: 260px;
	color: #3B5998;
	font-size: 25px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

 	}

.label_soli:after {

	content: "Caronas solicitadas";

}

#btn_confirmar {
	color: white;
    float: left;
    height: 50px;
    margin-left: 160px;
    width: 180px;
    z-index: 1;
    font-size: 25px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

}
#btn_oferecer {
	color: white;
	float:right;
    height: 50px;
    width: 180px;
    z-index: 4;
	margin-right:12px;
	margin-top: 20px;
	font-size: 25px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;



}

#btn_cancelar {

	color: white;
    float: right;
    height: 50px;
    margin-right: 160px;
    width: 180px;
    z-index: 1;
    font-size: 25px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

}


#btn_solicitar {

	color: white;
    float: left;
    height: 50px;
    width: 180px;
    z-index: 4;
	margin-left:27px;
	margin-top: 20px;
	font-size: 25px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

}

#btn_viagens {

	width: 330px;
	height: 50px;
	position: absolute;
	z-index: 4;
	margin-left: 245px;
	margin-top: 380px;
	color: white;
	font-size: 25px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

}

.ofertadas {
	background-color: white;
	width: 330px;
	height: 135px;
	border: 2px solid #3B5998 ;
	margin-left: 420px;
	position: absolute;
	margin-top: -220px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 11px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

}

hr {

	margin: 2px;
    
    
}

.itemOfertadas {
	margin-top: 0px;
	width: auto;
	height: auto;
    

}

.itemOfertadas div {

	display: inline;


}

.itemOfertadas:hover {

	background-color: #d4dae8;


}


.solicitadas {
	background-color: white;
	width: 330px;
	height: 135px;
	border: 2px solid #3B5998;
	margin-left: 50px;
	position: absolute;
	margin-top: -220px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 11px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

}

hr {

	margin: 2px;

}

.itemSolicitadas {
	margin-top: 0px;
	width: auto;
	height: auto;

}

.itemSolicitadas div {

	display: inline;

}

.itemSolicitadas:hover {

	background-color: #d4dae8;

}

/*NEW*/
.main-content {
	width: 100%;
	height:348px;
}

#buttons {
	width: 780px;
	height: 60px;
	position:absolute;
	z-index:5;
}

#top-buttons {
	width: 780px;
	height:60px;
	position:absolute;
	z-index:5;
	margin-top:40px;
}
#parte1 {
	width:390px;
	height:auto;
	float:left;
}
#parte2 {
	width:390px;
	height:auto;
	float:right;
}



.origem {
    height: 30px;
    margin-left: 130px;
    margin-top: 85px;
    width: 280px;
}

.destino {
    height: 30px;
    margin-left: 440px;
    margin-top: -40px;
    width: 280px;
}

.hora {
    height: 30px;
    margin-left: 36px;
    margin-top: -31px;
    width: 117px;
}

.vagas {
    height: 30px;
    margin-left: 27px;
    margin-top: -32px;
    width: 80px;
}


.calendario {
    height: 29px;
    margin-left: 129px;
    margin-top: -30px;
    width: 123px;
    z-index: 11;
}

.obs {
    height: 80px;
    margin-left: 29px;
    margin-top: 100px;
    width: 280px;
}

.convidar {
    height: 30px;
    margin-left: -396px;
    margin-top: 97px;
    width: 280px;
}


.laborigem {

	position: absolute;	
	margin-left: 107px;
	margin-top: 130px;
	color: #3B5998;
	font-size: 18px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

 	}

.laborigem:after {

	content: "Origem";

}


.labdestino {

	position: absolute;	
	margin-left: 415px;
	margin-top: 133px;
	color: #3B5998;
	font-size: 18px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

 	}

.labdestino:after {

	content: "Destino";

}

.labdata {

	position: absolute;	
	margin-left: 109px;
	margin-top: 208px;
	color: #3B5998;
	font-size: 18px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

 	}

.labdata:after {

	content: "Data";

}

.labhora {

	position: absolute;	
	margin-left: 269px;
	margin-top: 207px;
	color: #3B5998;
	font-size: 18px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

 	}

.labhora:after {

	content: "Hora";

}

.labvaga {

	position: absolute;	
	margin-left: 416px;
	margin-top: 205px;
	color: #3B5998;
	font-size: 18px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

 	}

.labvaga:after {

	content: "Vagas";

}

.labconvidado {

	position: absolute;	
	margin-left: 108px;
	margin-top: 270px;
	color: #3B5998;
	font-size: 18px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

 	}

.labconvidado:after {

	content: "Convidar amigos";

}

.labobs {

	position: absolute;	
	margin-left: 416px;
	margin-top: 271px;
	color: #3B5998;
	font-size: 18px;
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

 	}

.labobs:after {

	content: "Observacoes";

}